<template>
	<!-- 外层容器：占满整个视口 -->
	<view class="page-container">
		<!-- 主要内容区域（可滚动） -->
		<scroll-view scroll-y class="content">
			<!-- 这里放你的页面内容 -->
			<view style="padding: 20px;">
				<text>这里是页面内容区域，可以自由滚动</text>
			</view>
		</scroll-view>

		<!-- TabBar 固定在底部 -->
		<view class="tabbar-wrapper">
			<Tabbar />
		</view>
	</view>
</template>

<script setup>
	
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	
	const {
		proxy
	} = getCurrentInstance()
 
</script>

<style>
	/* 关键样式 */
	.page-container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		/* 禁止页面整体滚动 */
	}

	.content {
		height: calc(100vh - 50px);
		/* 减去 TabBar 高度 */
		overflow-y: auto;
		/* 允许内容区域滚动 */
	}

	.tabbar-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		z-index: 999;
		/* 确保 TabBar 在最上层 */
		background: #ffffff;
		/* 可选：TabBar 背景色 */
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		/* 可选：顶部阴影 */
	}
</style>